<template>
  <div class="personnel-container flex-column">
    <QueryContainer @search="handleSearch" @reset="handleReset">
      <el-form ref="queryForm" :model="queryInfo" class="align-center justify-between">
        <custom-button class="custom-button" @click="isDialogVisible=true"></custom-button>
        <!--        <custom-button class="custom-button" title="删除"></custom-button>-->
        <el-form-item prop="keyword">
          <el-input
            v-model="queryInfo.keyword"
            class="input-width mg-right-20"
            placeholder="请输入区域名"
            suffix-icon="el-icon-search"
          ></el-input>
        </el-form-item>
      </el-form>
    </QueryContainer>
    <!-- 区域列表 -->
    <div class="flex-sub area-table-container ">
      <el-table
        :data="tableData"
        v-loading="loading"
        height="98%"
        header-cell-class-name="table-header-cell"
        header-row-class-name="table-header-row"
      >
        <el-table-column type="selection" :width="handleScreenWidthToVw(55)+'px'" />
        <el-table-column prop="name" label="区域名称" />
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | dateTimeFormatter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="scope">
            <span size="small" class="btn-edit" @click="bandMap(scope.row)">绑定位置</span>
            <span class="lh-23">|</span>
            <span class="btn-delete " @click="delectRegion(scope.row.id)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      hide-on-single-page
      background
      layout="prev, pager, next, total, jumper"
      :current-page="queryInfo.pageNo"
      :page-size="queryInfo.pageSize"
      :total="queryInfo.total"
      @current-change="handleChangePage"
    />
    <!-- 新增弹窗 -->
    <el-dialog
      title="新增区域"
      :visible.sync="isDialogVisible"
      :width="handleScreenWidthToVw(574)+'px'"
      :close-on-click-modal="false"
    >
      <el-form
        ref="regionForm"
        :model="form"
        class="demo-form-inline"
        :rules="Rules"
        :label-width="handleScreenWidthToVw(100)+'px'"
        style="text-align: left;"
      >
        <el-form-item label="区域名：" prop="name">
          <el-input v-model="form.name" placeholder="请输入区域名：" class="form-input-width" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <SubButton @subClick="createRegion" />
        <CancelButton @cancelClick="closeDialog" />
      </span>
    </el-dialog>
    <BandMap
      :isDialogShow="isBandMapShow"
      :item="selectItem"
      @closeDialog="closeBandMap"
      @subDialog="subBandMap"
    ></BandMap>
  </div>
</template>

<script>
import { getRegionList, addRegion, delRegion } from './api'
import BandMap from './components/bind-map.vue'
import SubButton from '@/components/sub-button/index.vue'
import CancelButton from '@/components/cancel-button/index.vue'
import { handleScreenWidthToVw } from '@/utils/tools'
import QueryContainer from '@/components/query-container'

export default {
  components: { SubButton, CancelButton, BandMap, QueryContainer },

  data() {
    return {
      isDialogVisible: false,
      isBandMapShow: false,
      tableData: [],
      form: { name: '' },
      loading: false,
      queryInfo: {
        keyword: '',
        pageNo: 1,
        pageSize: 14,
        total: 0,
      },
      selectItem: {},
    }
  },
  computed: {
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
    Rules() {
      return {
        name: [
          { required: true, message: '请输入区域名', trigger: ['blur', 'change'] },
          // { min: 1, max: 10, message: "长度不超过 10 个字符", trigger: "blur" },
        ],
      }
    },
  },
  created() {
    this.initData()
  },
  async mounted() {},
  watch: {},

  methods: {
    //初始化数据
    async initData() {
      await this.handleSearch()
    },
    async handleSearch() {
      this.loading = true
      const { total, records } = await getRegionList(this.queryInfo)
      this.queryInfo.total = total
      this.tableData = records
      this.loading = false
    },
    handleChangePage(pageNo) {
      this.queryInfo.pageNo = pageNo
      this.handleSearch()
    },
    handleReset() {
      this.$refs.queryForm.resetFields()
      this.handleSearch()
    },
    //提交绑定弹窗
    subBandMap() {
      this.initData()
    },
    //关闭绑定弹窗
    closeBandMap() {
      this.isBandMapShow = false
    },
    //开启绑定弹窗
    bandMap(item) {
      this.isBandMapShow = true
      this.selectItem = { ...item }
    },

    //关闭新建弹窗
    closeDialog() {
      this.$refs.regionForm.resetFields()
      this.isDialogVisible = false
    },
    //创建新区域
    async createRegion() {
      await this.$refs.regionForm.validate()
      await addRegion(this.form)
      this.isDialogVisible = false
      this.initData()
      this.$refs.regionForm.resetFields()
    },
    //删除区域
    delectRegion(regionId) {
      this.$confirm('此操作将永久删除该区域, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delRegion(regionId).then(() => {
          this.initData()
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.personnel-container {
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
}

.area-table-container {
  padding: 0 vw(20px);
  // margin-top: 0;
}

.btn-edit {
  margin-right: vw(10px);
  color: #0084ee;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.input-width {
  width: vw(350px);
}

.form-input-width {
  width: vw(250px);
}

.btn-delete {
  margin-left: vw(10px);
  color: #d12d1f;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.custom-button + .custom-button {
  margin-left: vw(20px);
}

::v-deep {
  .el-dialog__header {
    height: vh(52px);
    padding: vh(17px) vw(23px) vh(17px);
    // background-color: #f8f8f8;
  }

  .el-dialog__title {
    font-size: vw(18px);
    font-weight: 500;
    color: #333;
  }

  .el-dialog__body {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: vh(20px);
  }

  .el-dialog__footer {
    padding: vh(10px) vw(20px) vh(20px);
    // background: #f0f4f8;
    text-align: center;
  }

  .el-form-item {
    margin-bottom: vh(22px);
  }

  .el-form-item__label {
    font-size: vw(14px);
    line-height: vh(40px);
  }

  .el-form-item__content {
    font-size: vw(14px);
    line-height: vh(40px);
  }
}
</style>
